星尘

16. 实现加载更多功能

发表于 更新于 分类于

实现加载更多功能

src/pages/home/components/List.js

1
<LoadMore onClick={ () => getMoreList(page) } >更多内容</LoadMore>

dispatch派发actionCreators创建的action

1
2
3
4
5
6
7
8
9
10
11
12
13
const mapState = (state) => ({
	list: state.getIn(['home', 'articleList']),
	page: state.getIn(['home', 'articlePage'])
	// get是获取单个，而getIn是获取多个
})

const mapDispatch = (dispatch) =>({
	getMoreList(page){
		dispatch(actionCreators.getMoreList(page))
	}
})

export default connect(mapState, mapDispatch)(List);

src/pages/home/store/actionCreators.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const addhomeList = (result, nextPage) => ({
	type: constants.ADD_ARTICLE_LIST,
	list: fromJS(result),
	nextPage
})

export const getMoreList = (page) =>{
	return (dispatch) =>{
		axios.get('/api/homeList.json?page=' + page).then((res) => {
			const result = res.data.data
			const action = addhomeList(result, page + 1)
			dispatch(action);
		})
	}
}

src/pages/home/store/reducer.js

1
2
3
4
5
case constants.ADD_ARTICLE_LIST:
			return state.merge({
				articleList: state.get('articleList').concat(action.list),
				articlePage: action.nextPage
			})

代码地址